<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Users</title>
<script type="text/javascript">
    function check(txtID, msgID, smsg, emsg, isTrim) {
        var txt = document.getElementById(txtID);
        var msg = document.getElementById(msgID);

        if (!txt || !msg) return false;
        if (!smsg) smsg = "&nbsp;";
        if (!emsg) emsg = "&nbsp;";

        var value = txt.value;
        if (isTrim) value = value.trim();

        if ("" == value) {
            msg.innerHTML = "<span style=\"color: #FF0000\">" + emsg + "</span>";
            return false;
        } else {
            msg.innerHTML = smsg;
            return true;
        }
    }

    function addUser() {
        var txtName = document.getElementById("txtName");
        var txtPwd = document.getElementById("txtPwd");
        var btnSave = document.getElementById("btnSave");

        if (check('txtName', 'msgName', '&nbsp;', '用户名不能为空', true)
            && check('txtPwd', 'msgPwd', '&nbsp;', '密码不能为空', false)) {
            var param = {};
            param.name = txtName.value.trim();
            param.pwd = txtPwd.value;

            var xmlhttp;
            if (window.XMLHttpRequest) {
                // IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            } else {
                // IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function() {
                if ((4 == xmlhttp.readyState) && (200 == xmlhttp.status)) {
                    var ret = JSON.parse(xmlhttp.responseText);
                    alert(ret.msg);
                    btnSave.enabled = true;
                    if (1 == ret.code) {
                        window.history.go(0);
                    }
                } else if (4 == xmlhttp.readyState) {
                    alert("用户添加失败！");
                    btnSave.enabled = true;
                }
            }
            xmlhttp.open("POST", "/user/add", true);
            xmlhttp.setRequestHeader("Content-type","application/json");
            xmlhttp.send(JSON.stringify(param));
            btnSave.enabled = false;
        }
    }

    function getAllUser() {
    //alert("getAllUser() in");
        var xmlhttp;
        if (window.XMLHttpRequest) {
            // IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        } else {
            // IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() {
            //alert("xmlhttp.readyState=" + xmlhttp.readyState + ", xmlhttp.status=" + xmlhttp.status);
            if ((4 == xmlhttp.readyState) && (200 == xmlhttp.status)) {
                var ary = JSON.parse(xmlhttp.responseText);
                var tabUserList = document.getElementById("tabUserList");
                var line = 10;
                var last_tr = null;
                for (var i = 0; i < ary.length; i++) {
                    if (i % line == 0) {
                        var tr = document.createElement("tr");
                        tabUserList.appendChild(tr);
                    }
                    var td = document.createElement("td");
                    tr.appendChild(td);
                    td.innerText = ary[i];
                    last_tr = tr;
                }
                // 创建剩余的单元格
                if (null != last_tr) {
                    var num = line - (ary.length % line);
                    for (var i = 0; i < num; i++) {
                        var td = document.createElement("td");
                        last_tr.appendChild(td);
                        td.innerHTML = "&nbsp;";
                    }
                }
            }
        }
        xmlhttp.open("GET", "/user/getAllUser", true);
        xmlhttp.send();
    }
</script>
</head>
<body onload="getAllUser()">
<h2>添加用户</h2>
<table border="0">
<tr>
<td>用户名：</td>
<td><input type="text" id="txtName" length=20 onblur="check('txtName', 'msgName', '&nbsp;', '用户名不能为空', true)" /></td>
<td id="msgName" width="300px;">&nbsp;</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="txtPwd" length=32 onblur="check('txtPwd', 'msgPwd', '&nbsp;', '密码不能为空', false)" /></td>
<td id="msgPwd">&nbsp;</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><input type="button" id="btnSave" value="保存" onclick="addUser()" /></td>
<td>&nbsp;</td>
</tr>
</table>

<h2>用户列表</h2>
<table border="0" id="tabUserList">
</table>
</body>
<footer>
    <hr />
    Powered by <a href="https://www.cnblogs.com/0xcafebabe/" target="_blank">dybai</a>, Open source by <a href="https://gitee.com/dybai/GerritManage" target="_blank">GitEE.com</a>.
</footer>
</html>